import React from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'

const directionMap = {
  horizontal: 'flex-row',
  vertical: 'flex-col',
}

const Space = ({
  direction,
  align,
  size,
  children,
  ...rest
}) => {
  const wrapClass = classNames('inline-flex', directionMap[direction], `items-${align}`)

  const itemClass = classNames('')

  const itemStyle = {
    [direction === 'horizontal' ? 'marginRight' : 'marginBottom']: size,
  }

  return (
    <div className={wrapClass} {...rest} >
      {React.Children.map(children, (child, index) => <div className={itemClass} style={index === children.length - 1 ? undefined : itemStyle}>{child}</div>)}
    </div>
  )
}
export default Space

Space.defaultProps = {
  direction: 'horizontal',
  size: 8
}
Space.prototype = {
  direction: PropTypes.string,
  align: PropTypes.string,
  size: PropTypes.number,
  children: PropTypes.node
}
